<template>
  <li :class="{done: todo.isDone}" @click="toggle(todo)">{{todo.name}}</li>
</template>
<script>
export default {
  props: {
    todo: {
      type: Object,
      required: true
    }
  },
  methods: {
    toggle (todo) {
      // 对于复杂数据类型，修改里面的属性是可以的，而且修改子组件的属性，会影响到父组件
      todo.isDone = !todo.isDone
    }
  }
}
</script>
<style lang="less" scoped>
// scoped属性用于产生样式的独立作用域，防止影响到别的组件的样式
.done {
  text-decoration: line-through;
}

li.done {
  background-color: rgb(154, 158, 160);
  opacity: .6;
}
li {
  padding: 10px 5px;
}
li:hover {
  background-color: rgb(51, 120, 148);
}
</style>
